/* ======================================================
   CSS OTIMIZADO DA PÁGINA DE PRODUTO
   ====================================================== */

body {
    font-family: 'Nunito Sans', sans-serif;
    background-color: #f7f8fa;
    margin: 0;
    padding-bottom: 120px; /* Espaço para o rodapé fixo */
}

/* --- CABEÇALHO (RESTAURADO PARA VERSÃO SÓLIDA) --- */
.product-header {
    background-color: #EA1D2C;
    color: #fff;
    padding: 0px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}

.back-button {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
}
.header-logo {
    height: 100px; /* Tamanho da logo unificado */
}

/* --- INFORMAÇÕES DO PRODUTO (AJUSTADO) --- */
.product-image img {
    width: 100%;
    max-width: 680px;  /* <<< ADICIONE ESTA LINHA */
    height: auto;
    display: block;
    margin: 0 auto;    /* <<< E ADICIONE ESTA LINHA */
}
.product-info {
    background-color: #fff;
    padding: 20px;
    margin-top: -10px;
    position: relative;
}
.product-info h1 {
    font-size: 1.7rem;
    font-weight: 800;
    color: #2d3748;
}
.product-info .price {
    font-size: 1.5rem;
    font-weight: 800;
    color: #00A44B;
}
.product-info .description {
    font-size: 0.95rem;
    color: #718096;
    line-height: 1.5;
}

/* --- GRUPOS DE OPÇÕES --- */
.option-group {
    background-color: #fff;
    border-radius: 16px;
    margin: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.group-header {
    padding: 20px 20px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.group-header h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #2d3748;
}
.group-description {
    font-size: 0.9rem;
    color: #718096;
    padding: 4px 20px 15px;
}

/* --- TAGS (Obrigatório, Grátis, etc) --- */
.tag-required, .tag-optional {
    font-size: 0.75rem;
    font-weight: 700;
    color: #4a5568;
    background-color: #f7f8fa;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}
.tag-gratis {
    font-size: 0.8rem;
    font-weight: 700;
    color: #00A44B;
    border: 1px solid #00A44B;
    padding: 3px 8px;
    border-radius: 6px;
    margin-left: auto;
}

/* --- ITENS DAS OPÇÕES --- */
.option-list {
    padding: 0 20px;
}
.option-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid #f0f0f0;
}
.option-item:first-child {
    border-top: none;
}
.option-item img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}
.item-info {
    flex-grow: 1;
}
.item-info h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #4a5568;
}
.item-info .item-price {
    font-size: 0.9rem;
    color: #718096;
    margin-top: 2px;
}

/* --- PREÇO RISCADO (Regra unificada) --- */
.product-info .price .old-price,
.option-item:has(.tag-gratis) .item-info .item-price {
    text-decoration: line-through;
    color: #a0aec0;
}

/* --- SELETOR DE QUANTIDADE --- */
.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e0;
    border-radius: 50px;
}
.quantity-selector button {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #718096;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quantity-selector span {
    font-size: 1rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    color: #2d3748;
}

/* --- OBSERVAÇÕES E RODAPÉ --- */
.comment-box {
    padding: 10px 20px 20px;
}
.comment-box textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    font-size: 1rem;
    font-family: 'Nunito Sans', sans-serif;
    resize: vertical;
    box-sizing: border-box;
}
.comment-box textarea:focus {
    border-color: #EA1D2C;
    outline: none;
}
.char-counter {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: #999;
    margin-top: 5px;
}

.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 15px 20px;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 15px;
    box-sizing: border-box;
    z-index: 20;
}

.quantity-selector-main {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.quantity-selector-main button {
    background: none;
    border: none;
    font-size: 1.2rem;
    padding: 10px 15px;
    cursor: pointer;
}
.quantity-selector-main span {
    font-size: 1rem;
    font-weight: 600;
}

.add-to-cart-button {
    flex-grow: 1;
    background-color: #EA1D2C;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.add-to-cart-button #total-price {
    font-size: 0.9rem;
    font-weight: 600;
}

/* UNIFICADO: Regras para o botão desabilitado agora estão juntas */
.add-to-cart-button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    justify-content: center; /* Centraliza o texto quando o preço some */
}
.add-to-cart-button:disabled #total-price {
    display: none; /* Esconde o preço quando desabilitado */
}

.required-alert {
    background-color: #ef4444;
    color: #fff;
    padding: 12px 20px;
    margin: 10px 0;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.required-alert i {
    margin-right: 8px;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.option-group.shake {
  position: relative;
  display: block;
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  will-change: transform;
  box-shadow: 0 0 0 3px rgba(234, 29, 44, 0.2);
}
/* === Tipografia unificada (garantia na página de produto) === */
:root{ --font-ui: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }

html, body,
h1, h2, h3, h4, h5, h6,
p, span, small, strong, em,
button, input, textarea, select,
.add-to-cart-button, .quantity-selector, .quantity-selector-main {
  font-family: var(--font-ui) !important;
}